/*
 * @Author: jiu yin
 * @Date: 2024-06-20 19:06:40
 * @LastEditTime: 2024-07-04 17:19:10
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\map_management\detail.tsx
 * jiu
 */
import { useState, useEffect } from "react";
import "./index.scss";
import { Button, Image, Modal, message } from "antd";
import { useRoute } from "@/hooks";
import CodeTable from "./component/CodeTable";
import { detail_atlas, devices_list } from "@/api/home";
import { b_to_mb } from "@/utils";
import { socket } from "@/utils/webSocket";
import Online_Modal_error from "@/comment/Online_Modal_error";

export default function detail() {
	const { getParams } = useRoute();
	const { map_id } = getParams();

	let [detail, setDetail] = useState<any>({});

	useEffect(() => {
		detail_atlas({ map_id: Number(map_id) }).then((res: any) => {
			setDetail(res.data);
		});
	}, []);

	//发送-------webSocket common页接受部署状态  CodeTable页定时器去扫更新
	const send = () => {
		if (detail.package_name && detail.file_url && detail.version) {
			let params = {
				action: "device/app/upgrade",
				payload: {
					package: detail.package_name,
					type: "zip",
					url: detail.file_url,
					version: detail.version,
					range: "", //全部||单个
				},
			};
			socket.send(JSON.stringify(params));
			message.success("部署开始发起");
		} else {
			console.count("部署数据不足");
			console.log(
				"detail.version:" +
					detail.version +
					"/detail.package_name:" +
					detail.package_name +
					"detail.file_url:" +
					detail.file_url
			);
			message.error("部署数据不足");
		}
	};

	//部署全部
	let [listPico,setListPico]=useState([])

	const DeployAll = async () => {
		if(listPico.length==0)return message.error("暂无设备部署")
		Online_Modal_error({ callback: send });
	};

	return (
		<div className="base_bg_fff">
			<section className="flex">
				<div className="flex justify-between  p-20px bg-#f7f8ff border-rd-10px flex-1">
					<div className="flex">
						<div className=" font-700 flex flex-col justify-around">
							<h3 className="c-#161940 text-20px">{detail.name}</h3>
							<p className="c-#5C5F7A  mt-8px">{detail.content}</p>

							<ul className="flex text-14px mt-26px">
								<li className="flex mr-28px">
									<span className="c-#9697A9 ">地图大小</span>
									<span className="c-#161940 ml-5px">{b_to_mb(detail.size)}M</span>
								</li>
								<li className="flex mr-28px">
									<span className="c-#9697A9 ">当前版本</span>
									<span className="c-#161940 ml-5px">{detail.version}</span>
								</li>
							</ul>
						</div>
					</div>
					<Button
						type="primary"
						onClick={() => {
							DeployAll();
						}}>
						部署全部
					</Button>
				</div>
			</section>

			<CodeTable map_id={Number(map_id)} detail={detail}  setListPico={setListPico}></CodeTable>
		</div>
	);
}
